<script setup>
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'

const router = useRouter()

const { goods } = storeToRefs(useCounterStore())

const { deleteGoods } = useCounterStore()

const handleEditGoods = (id) => {
  router.push(`/home/edit/${id}`)
}
</script>

<template>
  <div class="tab">
    <table>
      <tr>
        <th>id</th>
        <th>名称</th>
        <th>价格</th>
        <th>操作</th>
      </tr>
      <tr
        v-for="good in goods"
        :key="good.id"
        :class="good.id % 2 == 0 ? 'double' : 'single'"
      >
        <td>{{ good.id }}</td>
        <td>{{ good.name }}</td>
        <td>￥{{ good.price }}</td>
        <td>
          <button @click="handleEditGoods(good.id)" class="edit">修改</button>
          <button @click="deleteGoods(good.id)" class="del">删除</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<style scoped>
.tab table {
  width: 100%;
}

.tab table,
th,
td {
  /* border: 2px solid #05b0d8; */
  border: 2px solid white;
  border-spacing: none;
  border-collapse: collapse;
  padding: 10px 0;
  color: #333;
}

.single {
  background: #f5f8fd;
}

.double {
  background: #eaf6f6;
}

th {
  background: #c6daf2;
}

.tab td {
  text-align: center;
}

.tab button {
  padding: 5px 15px;
  margin-right: 5px;
  color: white;
  border: none;
  border-radius: 3px;
}

.edit {
  background: #0099ff;
}

.del {
  background: red;
}
</style>
